<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../template/common.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui">

    <ui:define name="title">
        Course List
    </ui:define>

    <ui:define name="head">
         <link rel="stylesheet" href="../../res/css/admin-style.css"/>
        <script>
            $(function() {
                $(document).tooltip();
            });
        </script>
        <style>
            label {
                display: inline-block;
                width: 100px;
            }
        </style>
            </ui:define>

            <ui:define name="pageheader">
            Course list
            </ui:define>

            <ui:define name="content">
            <h:form id="mainform">
<h:commandButton action="course-create" value="ADD NEW"  class="buttons"/>
            <h:dataTable  value="#{courseManager.allCourse}" var="s"
                          styleClass="order-table"
    			headerClass="order-table-header"
    			rowClasses="order-table-odd-row,order-table-even-row">


            <h:column>
            <f:facet name="header">
            <h:commandLink value="ID" />
            </f:facet>
            #{s.courseId}
            </h:column>
            <h:column>
            <f:facet name="header">
            <h:commandLink value="Center" />
            </f:facet>
            #{s.centers.name}
            </h:column>
            <h:column>
            <f:facet name="header">
            <h:commandLink value="Name" />
            </f:facet>
            #{s.name}
            </h:column>
            <h:column>
            <f:facet name="header">
            <h:commandLink value="Start date" />
            </f:facet>
            <h:outputText value="#{s.startDate}">
            <f:convertDateTime type="date" pattern="dd-MM-yyyy" timeZone="GMT+7"/>
            </h:outputText>
            </h:column>
            <h:column >
            <f:facet name="header">
            <h:commandLink value="End date" />
            </f:facet>
            <h:outputText value="#{s.endDate}">
            <f:convertDateTime type="date" pattern="dd-MM-yyyy" timeZone="GMT+7"/>
            </h:outputText>
            </h:column>
            <h:column>
            <f:facet name="header">
            <h:commandLink value="Status" />
            </f:facet>

            <h:selectOneMenu value="#{s.status}"  label="#{courseStatus.getDisplayName(s.status)}">
            <f:selectItems value="#{courseStatus.all}" var="st" itemLabel="#{st.display}" itemValue="#{st.value}"  />
            </h:selectOneMenu>
            <h:commandButton value="Set status" action="#{courseManager.updateStatus(s)}" class="status"  />
            </h:column>
            <h:column>
            <f:facet name="header" >
            Options
            </f:facet>
            <h:commandLink action="#{courseManager.edit(s)}" class="icon-1 info-tooltip" title="edit this course" />
            <h:commandLink action="#{courseManager.remove(s)}" styleClass="icon-2 info-tooltip" title="delete this course" />
            <h:commandLink action="#{courseManager.pickStudent(s)}" class="icon-5 info-tooltip" title="pick student"/>
                    <h:commandLink action="#{courseManager.pickStaff(s)}" class="icon-6 info-tooltip" title="pick staff"/>
            </h:column>

            </h:dataTable>
            <!--            <p:overlayPanel for="btnStaff">
            <p:pickList>

            </p:pickList>
            </p:overlayPanel>-->
            </h:form>
            </ui:define>

            </ui:composition>
